<template>
  <div class="playbar">
    <div class="left">
      <img
        :class="{ playing: playing }"
        :src="
          currentPlaySong.picUrl || currentPlaySong.al.picUrl | imageView(123)
        "
        alt=""
      />
      <div class="text">
        <span>{{ currentPlaySong.name }} -</span>
        <span
          v-for="(artist, index) in currentPlaySong.song
            ? currentPlaySong.song.artists
            : currentPlaySong.ar"
          :key="index"
          class="artist"   
          >{{ artist.name }}</span
        >
      </div>
    </div>
    <div class="right">
      <div class="progress">
        <svg
          v-if="!playing"
          @click.stop="$parent.$refs.audio.play()"
          t="1635927113486"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1603"
          width="15"
          height="15"
        >
          <path
            d="M798.579835 553.363155L270.865448 897.201157c-28.647146 18.857264-67.084174 9.067382-67.084174-45.987159V174.194878c0-55.415791 35.836026-62.965921 67.084174-45.914909l527.714387 343.765752c29.550272 19.83264 30.417272 59.786919 0 81.317434zM259.37769 828.708107l500.692867-315.985606L259.37769 196.700769V828.708107z"
            fill="#CCC"
            p-id="1604"
          ></path>
        </svg>

        <svg
          v-else
          @click.stop="$parent.$refs.audio.pause()"
          t="1636786856937"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2428"
          width="15"
          height="15"
        >
          <path
            d="M320 938.666667a21.333333 21.333333 0 0 1-21.333333-21.333334V106.666667a21.333333 21.333333 0 0 1 42.666666 0v810.666666a21.333333 21.333333 0 0 1-21.333333 21.333334z m405.333333-21.333334V106.666667a21.333333 21.333333 0 0 0-42.666666 0v810.666666a21.333333 21.333333 0 0 0 42.666666 0z"
            fill="#5C5C66"
            p-id="2429"
          ></path>
        </svg>

        <canvas
          ref="canvas"
          width="36"
          height="36"
          style="display: block; width: 30px; height: 30px"
        ></canvas>
      </div>
      <svg
        t="1635921750579"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5481"
        width="20"
        height="20"
        @click.stop="$emit('toggle-gedan', true)"
      >
        <path
          d="M469.333333 149.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h469.333333a21.333333 21.333333 0 0 1 0 42.666667H490.666667a21.333333 21.333333 0 0 1-21.333334-21.333334z m490.666667 362.666667H64a21.333333 21.333333 0 0 0 0 42.666667h896a21.333333 21.333333 0 0 0 0-42.666667z m0 384H64a21.333333 21.333333 0 0 0 0 42.666667h896a21.333333 21.333333 0 0 0 0-42.666667zM42.666667 384c0-23.626667 12.22-46.34 33.526666-62.32C96 306.84 121.953333 298.666667 149.333333 298.666667c23.333333 0 45.666667 5.946667 64 16.893333V64a21.333333 21.333333 0 0 1 42.666667-1.113333c0.74 14.14 3.52 35.48 12.553333 56.78 5.833333 13.753333 13.546667 25.613333 22.36 34.42a107.46 107.46 0 0 1 20.493334 18.78c12.6 14.853333 22.373333 33.566667 29.04 55.626666a21.333333 21.333333 0 0 1-40.84 12.346667C294.666667 224.666667 287.513333 210.666667 278.846667 200.466667a64.193333 64.193333 0 0 0-13.3-12 21.133333 21.133333 0 0 1-2.96-2.366667q-3.38-3.233333-6.586667-6.813333V384c0 23.626667-12.22 46.34-33.526667 62.32C202.666667 461.16 176.713333 469.333333 149.333333 469.333333s-53.333333-8.173333-73.14-23.013333C54.886667 430.34 42.666667 407.626667 42.666667 384z m42.666666 0c0 23.126667 29.333333 42.666667 64 42.666667s64-19.54 64-42.666667-29.333333-42.666667-64-42.666667-64 19.54-64 42.666667z"
          fill="#CCC"
          p-id="5482"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ["currentPlaySong", "playing", "currentTime", "duration"],
  watch: {
    currentTime: function (n) {
      n;
      var context = this.$refs.canvas.getContext("2d");
      context.clearRect(0, 0, 36, 36);

      // context.lineWidth = 2;

      context.beginPath();
      context.arc(
        18,
        18,
        17,
        (Math.PI / 180) * 360 * (this.currentTime / this.duration) - 90,
        (Math.PI / 180) * 360
      );
      context.strokeStyle = "#ccc";
      context.stroke();
      context.closePath();

      context.beginPath();
      context.arc(
        18,
        18,
        17,
        (Math.PI / 180) * 0 - 90,
        (Math.PI / 180) * 360 * (this.currentTime / this.duration) - 90
      );
      context.strokeStyle = "red";
      context.stroke();
      // context.closePath();

      // context.beginPath();
      // context.arc(25, 25, 20, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
      // context.strokeStyle = "#ccc";

      // context.stroke();
      // context.closePath();
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes myrotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.playbar {
  display: flex;
  align-items: center;
  height: 46px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: white;
  padding: 0 10px;
  box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.2);
  .left {
    flex: 1;
    display: flex;
    align-items: center;
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      vertical-align: middle;
      animation: myrotate 8s linear infinite;
      animation-play-state: paused;
      &.playing {
        animation-play-state: running;
      }
    }
    .text {
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      span {
        margin-left: 5px;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    .progress {
      position: relative;
      svg {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    }
    svg {
      margin-left: 10px;
    }
  }
}
</style>
